import React from 'react';
import $ from 'jquery';
import axios from 'axios';

export default class Headpic extends React.Component {
  constructor(props) {
    super(props);
    this.onchange = this.onchange.bind(this);
  }

  clickImgButton() {
    $("#headpic").click();
  }

  onchange(e) {
    let file = e.target.files[0];
    let formData = new FormData();
    formData.append('file',file);
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
      }
    }
    axios.post('http://control.maksdu.com/upload/headpic',formData,config).then(resp=>{
      if(resp.status!=200) {
        alert("error:"+resp.content);
      } else {
        console.info("头像上传成功");
        this.props.bindChange(resp);
      }
    }).catch((error) =>{

    });
  }

  render() {
    return (
      <div style={{position:'relative'}}>
        <div className="headpic_img">
        	<img src={this.props.headUrl} alt={this.props.targetUrl} width={this.props.width} height={this.props.width} />    
        </div>
        <div className="img_upload">
            <input type="file" id="headpic" accept="true" style={{display:'none'}} onChange={this.onchange}/>
            <span className="ant-upload" onClick={this.clickImgButton}>
              <div className="d-ib">
                <i className="anticon anticon-plus" style={{fontSize:'28px'}}>
                  <svg viewBox="64 64 896 896" className="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z">
                    </path>
                  </svg>
                </i>
                <div className="ant-upload-text">{this.props.unhead?'重新上传':'上传头像'}</div>
              </div>
            </span>
        </div>
      </div>
    );
  }
}